<template>
    <div class="content">
        <van-tabbar v-model="active" active-color="#1E9858" @change="activeChange">
            <van-tabbar-item>
                <span>赛事公告</span>
                <template #icon="props">
                    <img :src="active == 0 ? require('@/assets/img/icon1.png') : require('@/assets/img/icon2.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>赛事报名</span>
                <template #icon="props">
                    <img :src="active == 1 ? require('@/assets/img/icon3.png') : require('@/assets/img/icon4.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>比赛报到</span>
                <template #icon="props">
                    <img :src="active == 2 ? require('@/assets/img/icon5.png') : require('@/assets/img/icon6.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>比赛结果</span>
                <template #icon="props">
                    <img :src="active == 3 ? require('@/assets/img/icon7.png') : require('@/assets/img/icon8.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
        <div class="top"></div>
        <!-- 赛事报告 -->
        <div class="base" v-if="active == 0">
            <div class="bottom-box" style="height:80vh;">
                <div class="plan-info">
                    <img src="../../assets/img/plan.png" alt="">
                </div>
                <van-tabs v-model="activeName">
                    <van-tab title="未开始" name="1">
                        <div class="plan-text-info" v-for="(item, index) in GameList" :key="index" v-if="item.state == 0"
                            @click="takeGame(item)">
                            <div class="info-left">
                                <img src="../../assets/img/tuoyuan2.png" alt="">
                            </div>
                            <div class="info-right" >
                                <div style="width: 70%;">
                                    <p>{{item.home+'-第'+ item.phases }}期</p>
                                    <p class="text-bg">{{ item.date }}</p>
                                </div>

                                <p class="text-btn" @click.stop="updateGame(item, 1)">修改</p>
                            </div>
                        </div>
                        <div class="norecords" v-if="GameList && GameList.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                    <van-tab title="进行中" name="2">
                        <div class="plan-text-info" v-for="(item, index) in GameList" :key="index" v-if="item.state == 1"
                            @click="takeGame(item, 1)">
                            <div class="info-left">
                                <img src="../../assets/img/tuoyuan2.png" alt="">
                            </div>
                            <div class="info-right">
                                <div style="width: 70%;">
                                    <p>{{item.home+'-第'+ item.phases }}期</p>
                                    <p class="text-bg">{{ item.date }}</p>
                                </div>
                                <p class="text-btn" @click.stop="sureGame(item)">确认</p>
                            </div>
                        </div>
                        <div class="norecords" v-if="GameList && GameList.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                    <van-tab title="已完成" name="3">
                        <div class="plan-text-info" v-for="(item, index) in GameList" :key="index" v-if="item.state == 2">
                            <div class="info-left">
                                <img src="../../assets/img/tuoyuan2.png" alt="">
                            </div>
                            <div class="info-right">
                                <div style="width: 70%;">
                                    <p>{{item.home+'-第'+ item.phases }}期</p>
                                    <p class="text-bg">{{ item.date }}</p>
                                </div>
                                <p class="text-btn" @click="goGame(item)">查看</p>
                            </div>
                        </div>
                        <div class="norecords" v-if="GameList && GameList.length == 0">
                            暂无记录
                        </div>
                    </van-tab>
                </van-tabs>
                <div class="btn-info">
                    <van-button class="btn" :round="true" color="#1E9858" @click="addGameShow">新增</van-button>
                </div>
            </div>
        </div>
        <!-- 赛事报名 -->
        <div v-if="active == 1">
            <div class="header10">
                <div class="header-bg1">
                    <div class="h-title" style="padding-top:.1rem">赛事报名</div>
                </div>

                <div class="card-top" v-if="typeShow">
                    <div style="margin-top: 0.2rem" @click="dateSelectChange(1)">
                        <span class="title">报名开始时间：</span>
                        <input class="input" style="width: 50%;" type="" readonly v-model="time" id="number"
                            placeholder="请选择报名开始时间" />
                    </div>

                </div>
                <div class="card-top" style="margin-top:.2rem;">
                    <!--   <div class="card-top-btn">
                        打印初赛表格
                    </div>
                    <div class="card-top-btn" style="margin: 0 .1rem; ">
                        打印复赛表格
                    </div> -->
                    <div class="card-top-btn" @click="jumpExcel">
                        打印比赛表格
                    </div>

                </div>
            </div>
            <div class="card3">
                <div class="card3-bg">
                    <div class="card3-top" v-for="(item, index) in tableList" :key="index">
                        <div class="card3-zhuo">
                            第{{ index + 1 }}桌
                        </div>
                        <img v-if="item[0].state == 0" class="card3-zhuo1 majiang-icon"
                            :src="require('@/assets/img/mj4.png')" alt="">
                        <img v-else class="card3-zhuo1 majiang-icon" :src="require('@/assets/img/mj5.png')" alt="">
                        <img v-if="item[1].state == 0" class="card3-zhuo2 majiang-icon"
                            :src="require('@/assets/img/mj4.png')" alt="">
                        <img v-else class="card3-zhuo2 majiang-icon" :src="require('@/assets/img/mj6.png')" alt="">
                        <img v-if="item[2].state == 0" class="card3-zhuo3 majiang-icon"
                            :src="require('@/assets/img/mj4.png')" alt="">
                        <img v-else class="card3-zhuo3 majiang-icon" :src="require('@/assets/img/mj7.png')" alt="">
                        <img v-if="item[3].state == 0" class="card3-zhuo4 majiang-icon"
                            :src="require('@/assets/img/mj4.png')" alt="">
                        <img v-else class="card3-zhuo4 majiang-icon" :src="require('@/assets/img/mj8.png')" alt="">

                    </div>
                </div>
                <div>
                    <div class="card3-btn1" @click="sureClick" v-if="typeShow">
                        确认开始报名时间
                    </div>
                    <div class="card3-btn1" @click="addGameShows">
                        邀请函
                    </div>
                </div>
            </div>
        </div>
        <!-- 比赛报道 -->
        <div v-if="active == 2">
            <div class="card4">
                <div class="card4-bg">
                    <div class="card3-top" v-for="(item, index) in tableList" :key="index">
                        <div class="card3-zhuo">
                            第{{ index + 1 }}桌
                        </div>
                        <div @click="sureImgClick(1, item[0])">
                            <div v-if="sureImg1">
                                <img v-if="item[0].state == 0" class="card3-zhuo1 majiang-icon"
                                    :src="require('@/assets/img/mj4.png')" alt="">
                                <img v-else class="card3-zhuo1 majiang-icon" :src="require('@/assets/img/mj5.png')" alt="">
                            </div>
                            <div v-else>
                                <img v-if="sureImg2 && sureImg3 && sureImg4 && id1 == item[0].id"
                                    class="card3-zhuo1 majiang-icon" :src="require('@/assets/img/mj3.png')" alt="">
                                <img v-else-if="item[0].state != 0 && id1 != item[0].id" class="card3-zhuo1 majiang-icon"
                                    :src="require('@/assets/img/mj5.png')" alt="">
                                <img v-else class="card3-zhuo1 majiang-icon" :src="require('@/assets/img/mj4.png')" alt="">
                            </div>
                        </div>
                        <div @click="sureImgClick(2, item[1])">
                            <div v-if="sureImg2">
                                <img v-if="item[1].state == 0" class="card3-zhuo2 majiang-icon"
                                    :src="require('@/assets/img/mj4.png')" alt="">
                                <img v-else class="card3-zhuo2 majiang-icon" :src="require('@/assets/img/mj6.png')" alt="">
                            </div>
                            <div v-else>
                                <img v-if="sureImg1 && sureImg3 && sureImg4 && id2 == item[1].id"
                                    class="card3-zhuo2 majiang-icon" :src="require('@/assets/img/mj3.png')" alt="">
                                <img v-else-if="item[1].state != 0 && id2 != item[1].id" class="card3-zhuo2 majiang-icon"
                                    :src="require('@/assets/img/mj6.png')" alt="">
                                <img v-else class="card3-zhuo2 majiang-icon" :src="require('@/assets/img/mj4.png')" alt="">
                            </div>
                        </div>
                        <div @click="sureImgClick(3, item[2])">
                            <div v-if="sureImg3">
                                <img v-if="item[2].state == 0" class="card3-zhuo3 majiang-icon"
                                    :src="require('@/assets/img/mj4.png')" alt="">
                                <img v-else class="card3-zhuo3 majiang-icon" :src="require('@/assets/img/mj7.png')" alt="">
                            </div>
                            <div v-else>
                                <img v-if="sureImg1 && sureImg2 && sureImg4 && id3 == item[2].id"
                                    class="card3-zhuo3 majiang-icon" :src="require('@/assets/img/mj3.png')" alt="">
                                <img v-else-if="item[2].state != 0 && id3 != item[2].id" class="card3-zhuo3 majiang-icon"
                                    :src="require('@/assets/img/mj7.png')" alt="">
                                <img v-else class="card3-zhuo3 majiang-icon" :src="require('@/assets/img/mj4.png')" alt="">
                            </div>
                        </div>
                        <div @click="sureImgClick(4, item[3])">
                            <div v-if="sureImg4">
                                <img v-if="item[3].state == 0" class="card3-zhuo4 majiang-icon"
                                    :src="require('@/assets/img/mj4.png')" alt="">
                                <img v-else class="card3-zhuo4 majiang-icon" :src="require('@/assets/img/mj8.png')" alt="">
                            </div>
                            <div v-else>
                                <img v-if="sureImg1 && sureImg2 && sureImg3 && id4 == item[3].id"
                                    class="card3-zhuo4 majiang-icon" :src="require('@/assets/img/mj3.png')" alt="">
                                <img v-else-if="item[3].state != 0 && id4 != item[3].id" class="card3-zhuo4 majiang-icon"
                                    :src="require('@/assets/img/mj8.png')" alt="">
                                <img v-else class="card3-zhuo4 majiang-icon" :src="require('@/assets/img/mj4.png')" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card3-btn1" @click="reserVation">
                        订座
                    </div>
                    <div class="card3-btn1" @click="deReserVation">
                        取消订座
                    </div>
                </div>
            </div>
        </div>
        <!-- 比赛结果 -->
        <div class="base" v-if="active == 3">
            <div class="top-box" style="height: 70vh;">

                <div class="hint-info1">
                    <img src="../../assets/img/trophies-line.png" alt="">
                    <div class="text"><!-- <span class="green">西安</span> --> <span>第{{ GameListQuery.phases }}期麻将邀请赛</span>
                    </div>
                </div>
                <div class="result-info">
                    <img src="../../assets/img/tuoyuan2.png" alt="">
                    <div class="result-body">
                        <p class="title">本届比赛结果 ：</p>
                        <div class="result-content">
                            <div class="content-left">
                                <div class="icon"></div>
                                <div class="content-text">
                                    <p class="ranking-text">TOP 1</p>
                                    <p class="ranking-name">{{ phone1 }}</p>
                                </div>
                            </div>
                            <div class="content-right">
                                <div class="icon"></div>
                                <div class="content-text">
                                    <p class="ranking-text">TOP 2</p>
                                    <p class="ranking-name">{{ phone2 }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="award-info">
                    <img src="../../assets/img/tuoyuan2.png" alt="">
                    <div class="award-body">
                        <div class="award-content">
                            <p class="title">比赛奖励：</p>
                            <p>冠军<span class="green">{{ phone1 }}</span>获 <span class="orange">{{ reward1 }}元</span>代金券！！！
                            </p>
                            <p>亚军<span class="green">{{ phone2 }}</span>获 <span class="orange">{{ reward2 }}元</span>代金券！！！
                            </p>
                        </div>

                    </div>

                </div>
                <van-button class="info-btn" :round="true" color="#1E9858" @click="shouClick">赛事收支</van-button>
            </div>
        </div>
        <!-- 新增/修改赛事计划 -->
        <van-dialog v-model="gameShow" title="" :show-cancel-button="false" :showConfirmButton="false" width="85%">
            <div class="header-bgs">
                <div class="h-title"></div>
            </div>
            <div style="padding:0 .6rem;">
                <div style="margin-top: 0.8rem" @click="dateSelectChange">
                    <span class="title">日期：</span>
                    <input class="input" style="width: 70%;" type="" readonly v-model="date" id="number"
                        placeholder="请输入日期" />
                </div>
                <div style="margin-top: 0.3rem" v-if="updateGameShow != 2">
                    <span class="title">期数：</span>
                    <input class="input" style="width: 70%;" type="Number" v-model="phases" id="number"
                        placeholder="请输入期数" />
                </div>
                <div style="margin-top: 0.3rem" v-if="updateGameShow != 2" @click="citySelectChanges">
                    <span class="title">桌数：</span>
                    <input class="input" style="width: 70%;" type="Number" v-model="tables" id="number"
                        placeholder="请输入桌数" />
                </div>
                <div style="margin-top: 0.3rem" @click="citySelectChange">
                    <span class="title">城市：</span>
                    <input class="input" style="width: 70%;" readonly type="" v-model="city" id="number"
                        placeholder="请输入城市" />
                </div>
                <div style="margin-top: 0.3rem">
                    <span class="title">地址：</span>
                    <input class="input" style="width: 70%;" type="" v-model="adress" id="number" placeholder="请输入地址" />
                </div>
                <div style="margin-top: 0.3rem">
                    <span class="title">门票：</span>
                    <input class="input" style="width: 70%;" type="" v-model="payee" id="number" placeholder="请输入门票" />
                </div>
                <div style="margin-top: 0.3rem">
                    <span class="title">主场商户：</span>
                    <input class="input" type="" v-model="home" id="number" placeholder="请输入主场商户" />
                </div>
            </div>
            <div style="display: flex;margin: .3rem 0;">

                <div class="dloBtn" @click="gameShow = false">取消</div>
                <div class="dloBtnS" style="margin-left: .1rem;" @click="addGame">确定</div>
            </div>
        </van-dialog>

        <!-- 年月日小时弹窗 -->
        <van-popup v-model="isShowBirth" position="bottom" style="height: 50%" round>
            <van-datetime-picker v-model="currentDate" type="datetime" title="选择年月日小时分" :min-date="minDate"
                :max-date="maxDate" @cancel="isShowBirth = false" @confirm="confirmFn" />
        </van-popup>
        <!-- 城市列表 -->
        <van-popup v-model="isShowCity" position="bottom" style="height: 50%" round>
            <van-picker title="城市" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="isShowCity = false" />
        </van-popup>
        <!-- 桌数列表 -->
        <van-popup v-model="isShowCitys" position="bottom" style="height: 50%" round>
            <van-picker title="桌数" show-toolbar :columns="columnss" @confirm="onConfirms" @cancel="isShowCitys = false" />
        </van-popup>
    </div>
</template>
  
<script>
import { newGame, getGameList, getDetail, lockSeat, confirmTime, gameResult } from "@/api/fulfil.js";

import shijiancYear from '@/utils/getYears.js'
export default {
    name: 'Tournament',
    data() {
        return {
            isSureShow: false,
            isShowCity: false,//城市弹窗
            isShowCitys: false,//桌数弹窗
            password1: '',
            active: 0,
            gameShow: false,//赛事计划
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            isShowBirth: false,
            adress: '',//新增赛事地址
            date: '',//新增date
            phases: '',//新增赛事期数
            tables: '',//新增赛事桌数
            type: 1,//1：新增  2修改
            city: '',//新增赛事城市
            home: '',//新增赛事商户
            payee: '20',//门票
            columns: ['株洲'],
            columnss: ['4','8','16'],
            GameList: [],
            updateGameShow: 1,//默认为1
            mid: "",
            tableList: [],//麻将列表
            time: '',//报名开始时间
            sureImg1: true,
            sureImg2: true,
            sureImg3: true,
            sureImg4: true,
            id1: '',
            id2: '',
            id3: '',
            id4: '',
            gameQuery: {},
            activeName: '1',
            acticeJump: false,
            acticeResultJump: false,
            GameListQuery: {},
            reward1: '',
            reward2: '',
            phone1: '',
            phone2: '',
            typeShow: true,
        };
    },
    watch: {
        active(newValue, oldValue) {
            console.log(newValue, 'newValue');

        }
    },
    activated() {
        this.getGameList();
    },
    methods: {
        activeChange(val) {
            if ((val == 1 || val == 2) && !this.acticeJump) {
                this.active = 0;
                this.$Toast('请先在赛事公告中选择未开始或进行中的比赛!');
            } else if ((val == 3) && !this.acticeResultJump) {
                this.$Toast('请先在赛事公告中选择要查看的赛事!');
                this.active = 0;
            } else if (val == 0) {
                this.getGameList();
            }
        },
        //占座
        reserVation() {
            lockSeat({
                agentid: localStorage.getItem("agentid"),
                mid: this.gameQuery.mid,
                table: this.gameQuery.table,
                seat: this.gameQuery.seat,
                lock: 4,
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast("占座成功！");
                        this.sureImg1 = true;
                        this.sureImg2 = true;
                        this.sureImg3 = true;
                        this.sureImg4 = true;
                        this.getDetail();
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        deReserVation() {
            lockSeat({
                agentid: localStorage.getItem("agentid"),
                mid: this.gameQuery.mid,
                table: this.gameQuery.table,
                seat: this.gameQuery.seat,
                lock: 0,
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.sureImg1 = true;
                        this.sureImg2 = true;
                        this.sureImg3 = true;
                        this.sureImg4 = true;
                        this.$Toast("取消占座成功！");
                        this.getDetail();
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        //选中
        sureImgClick(type, item) {
            console.log(type, 'type');
            console.log(item, 'item');
            this.gameQuery = item;
            if (type == 1) {
                this.id1 = item.id;
                this.sureImg1 = false;
                this.sureImg2 = true;
                this.sureImg3 = true;
                this.sureImg4 = true;
            } else if (type == 2) {
                this.id2 = item.id;
                this.sureImg1 = true;
                this.sureImg2 = false;
                this.sureImg3 = true;
                this.sureImg4 = true;
            } else if (type == 3) {
                this.id3 = item.id;
                this.sureImg1 = true;
                this.sureImg2 = true;
                this.sureImg3 = false;
                this.sureImg4 = true;
            } else if (type == 4) {
                this.id4 = item.id;
                this.sureImg1 = true;
                this.sureImg2 = true;
                this.sureImg3 = true;
                this.sureImg4 = false;
            }
        },
        //座位列表
        getDetail() {
            getDetail({
                agentid: localStorage.getItem("agentid"),
                mid: this.mid,
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        let tableList = [];

                        for (var i = 0, j = res.data.data.length; i < j; i += 4) {
                            tableList.push(res.data.data.slice(i, i + 4));
                        }
                        this.tableList = tableList;
                        console.log(this.tableList, 'this.tableList');
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        //赛事列表
        getGameList() {
            getGameList({
                agentid: localStorage.getItem("agentid"),
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.GameList = res.data.data;

                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        //赛事结果
        gameResult() {
            gameResult({
                agentid: localStorage.getItem("agentid"),
                mid: this.mid
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.GameListQuery = res.data.data;
                        this.GameListQuery.result.forEach((item) => {
                            if (item.ranking == 1) {
                                this.phone1 = item.phone;
                                this.reward1 = item.reward;
                            }
                            if (item.ranking == 2) {
                                this.phone2 = item.phone;
                                this.reward2 = item.reward;
                            }
                        })
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        //点击去报名
        takeGame(item, type) {
            if (type && type == 1) {
                this.typeShow = false;
            } else {
                this.typeShow = true;
            }
            this.acticeJump = true;
            this.active = 1;
            this.mid = item.id;
            localStorage.setItem('mid', item.id);
            this.getDetail();
        },
        //修改赛事
        updateGame(item) {
            this.gameShow = true;
            this.updateGameShow = 2;
            this.date = item.date;
            this.phases = item.phases;
            this.tables = item.tables;
            this.city = item.city;
            this.adress = item.adress;
            this.payee = item.payee;
            this.mid = item.id;
            this.home = item.home;
        },
        shouClick() {
            this.$router.push({
                path: '/regisResult',
            })
        },
        //确认结果
        sureGame(item) {
            localStorage.setItem('mid', item.id);
            this.$router.push({
                path: '/registration',
            })
        },
        //去查看结果
        goGame(item) {
            localStorage.setItem('mid', item.id);
            this.mid = item.id;
            this.acticeResultJump = true;
            this.active = 3;
            this.gameResult();
        },
        //打印表格
        jumpExcel() {
            let len = this.tableList.length;
            this.$router.push({
                path: '/round',
                query: {
                    len: len
                }
            })
        },
        //新增赛事
        addGame() {
            if (!this.date) {
                this.$Toast("时间不能为空！");
            } else if (!this.phases) {
                this.$Toast("期数不能为空！");
            } else if (!this.tables) {
                this.$Toast("桌数不能为空！");
            } else if (!this.city) {
                this.$Toast("城市不能为空！");
            } else if (!this.adress) {
                this.$Toast("地址不能为空！");
            } else if (!this.payee) {
                this.$Toast("门票不能为空！");
            } else if(this.payee &&  Number(this.payee) < 20){
                this.$Toast("门票不能低于20元！");
            }else if (!this.home) {
                this.$Toast("商户不能为空！");
            } else {

                newGame({
                    agentid: localStorage.getItem("agentid"),
                    adress: this.adress,
                    date: this.date,
                    mid: this.mid,
                    phases: Number(this.phases),
                    tables: Number(this.tables),
                    type: this.updateGameShow,
                    city: this.city,
                    payee: this.payee.toString(),
                    home: this.home,
                })
                    .then((res) => {
                        if (res.data.code == 0) {
                            if (this.updateGameShow == 1) {
                                this.$Toast("新增赛事成功！");
                            } else {
                                this.$Toast("修改赛事成功！");
                            }

                            this.gameShow = false;
                            this.getGameList();
                            this.activeName = '1';
                        } else {
                            this.$Toast(res.data.msg);
                        }
                        console.log(res, 'res');

                    })
                    .catch((error) => {
                        this.changeShow = false;
                        console.log(error);
                    });
            }
        },
        //新增赛事
        addGameShow() {
            this.updateGameShow = 1;
            this.gameShow = true;
        },
        //跳转邀请函
        addGameShows() {
            this.$router.push({
                path: '/invitation'
            })
        },
        //确定报到时间
        sureClick() {
            confirmTime({
                agentid: localStorage.getItem("agentid"),
                mid: this.mid,
                time: this.time,
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast('确认比赛时间成功！');
                        this.active = 0;
                        this.activeName = '2';
                        this.typeShow = false;
                        this.getGameList();
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        onConfirm(value, index) {
            this.isShowCity = false;
            this.city = value;
        },
        onConfirms(value, index) {
            this.isShowCitys = false;
            this.tables = value;
        },
        //选择日期
        dateSelectChange(type) {
            this.isShowBirthType = type;
            this.isShowBirth = true;
        },
        //选择城市列表
        citySelectChange() {
            this.isShowCity = true;
        },
        //桌数
        citySelectChanges(){
            this.isShowCitys = true;
        },
        //新增选择日期
        confirmFn() {
            if (this.isShowBirthType && this.isShowBirthType == 1) {
                this.time = shijiancYear(this.currentDate);
            } else {
                this.date = shijiancYear(this.currentDate);
            }

            this.isShowBirth = false
        },
    },
};
</script>
  
<style scoped lang="less">
.content {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background-color: #F4F3F8;
}

.top {
    width: 100%;
    height: 3rem;
    background: linear-gradient(to bottom, #93c9af, #F4F3F8);
}

.header10 {
    overflow: hidden;
    box-sizing: border-box;
    padding: .2rem;
    margin: -2.5rem auto 0;
    width: 90%;
    background-color: #fff;
    border-radius: .4rem;
    text-align: center;
}

.header {

    overflow: hidden;
    box-sizing: border-box;
    padding: .2rem;
    margin: -1.5rem auto 0;
    width: 90%;
    height: 70vh;
    background-color: #fff;
    border-radius: .4rem;
    text-align: center;
}

.text {
    margin: .45rem auto 0;
    font-size: .35rem;
    color: black;
}

.text-top {
    margin: 0 auto 0;
    font-size: .4rem;
    color: black;

}

.tips {
    margin: .4rem auto 0;
    text-align: right;
    color: black;
}

.header-bg1 {
    box-sizing: border-box;
    margin: 0 auto 0;
    width: 4.4625rem;
    height: 1.1rem;
    background: url('@/assets/img/bisaijieguo.png') no-repeat;
    background-size: 100% 100%;
    font-size: .35rem;
    color: #000;
    text-align: center;
    font-weight: 600;
    line-height: 1.1rem;
}

.header-bgs {
    box-sizing: border-box;
    margin: .3rem auto 0;
    width: 5.4625rem;
    height: 1.2rem;
    background: url('@/assets/img/plan.png') no-repeat;
    background-size: 100% 100%;
    font-size: .35rem;
    color: #000;
    text-align: center;
    font-weight: 600;
    line-height: 1.1rem;
}

.h-title {
    margin-left: .5rem;
}

.dloBtn {
    display: inline-block;
    width: 35%;
    height: 1rem;
    background: #dcf0e5;
    color: #1d9858;
    border-radius: .5rem;
    text-align: center;
    line-height: 1rem;
    margin: .3rem auto;
}

.dloBtnS {
    display: inline-block;
    width: 35%;
    height: 1rem;
    background: #1d9858;
    color: #fff;
    border-radius: .5rem;
    text-align: center;
    line-height: 1rem;
    margin: .3rem auto;
}

.input-game {
    padding-left: .3rem;
    width: 18%;
    height: 1rem;
    border-color: #ccc;
    border-radius: .1rem;
}

.input {
    padding-left: .3rem;
    width: 60%;
    height: .8rem;
    border-color: #ccc;
    border-radius: .1rem;
}

.input1 {
    padding-left: .3rem;
    width: 40%;
    height: 1rem;
    border-color: #ccc;
    border-radius: .1rem;
}

.input2 {
    padding-left: .3rem;
    width: 35%;
    height: 1rem;
    border-color: #ccc;
    border-radius: .1rem;
}

.title {
    font-size: .4rem;
    color: #000;
}

::v-deep .van-tabbar-item__icon {
    font-size: .55rem;
}

::v-deep .van-tabbar-item__text {
    font-size: .32rem;
}

::v-deep .van-ellipsis {
    font-size: .4rem;
}

::v-deep .van-picker__cancel {
    font-size: .4rem;
}

::v-deep .van-picker__confirm {
    font-size: .4rem;
}

::v-deep .van-tab {
    font-size: .37rem;
}

/* 赛事报告 */
.base {
    margin-top: -2.5rem;
    height: 100%;
    padding: 0 0.6rem;
    font-size: 0.35rem;
    font-weight: 700;
    line-height: 2;

    .green {
        color: #1E9858;
    }

    .orange {
        color: #FF9B19;
    }

    .top-box {
        position: relative;
        border-radius: .4rem;
        padding: 0.5rem 0.4375rem;
        background-color: #fff;

        .hint-info1 {
            position: relative;
            margin: .4375rem 0;
            text-align: center;

            img {
                max-height: 0.9rem;
            }

            .text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-40%, -110%);
            }
        }

        .hint-info {
            position: relative;
            margin: .4375rem 0;
            text-align: center;

            img {
                max-height: 0.9rem;
            }

            .text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-40%, -50%);
            }
        }

        .info-btn {
            position: absolute;
            left: 20%;
            bottom: .3rem;
            width: 60%;
            height: 1rem;
            border-radius: .4rem;
            text-align: center;
            line-height: 1rem;
            background-color: #1d9858;
            color: #fff;
        }

        .result-info,
        .award-info {
            position: relative;
            display: flex;
            justify-content: start;
            align-items: start;


            img {
                width: 0.375rem;
                margin: 0.13rem;
            }

            .result-body,
            .award-body {
                flex: 1;

                .text {
                    font-size: 0.35rem;
                }

                .result-content {
                    display: flex;
                    justify-content: space-around;
                    align-items: end;
                    padding: 0.5rem 0;

                    .content-left {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .icon {
                            position: relative;
                            width: 2.5rem;
                            height: 2.55rem;
                            background: linear-gradient(148deg, #F6D56E 0%, #FEFDAD 47%, #F8EE81 100%);
                            border-radius: 30px;
                            text-align: center;
                            border: 2px solid #DDCA8D;
                        }

                        .icon::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.9rem solid transparent;
                            border-right: 0.9rem solid transparent;
                            border-bottom: 0.3rem solid #DDCA8D;
                        }

                        .icon::after {
                            content: '';
                            position: absolute;
                            bottom: -2px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.9rem solid transparent;
                            border-right: 0.9rem solid transparent;
                            border-bottom: 0.3rem solid #fff;
                        }

                        .content-text {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            text-align: center;
                            font-size: 0.5rem;
                            font-weight: 400;
                            line-height: 1.5;

                            p {
                                padding: 0 0.125rem;
                            }

                            .ranking-text {
                                background: linear-gradient(0deg, #E9B15F 0%, #DB512D 100%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }

                            .ranking-name {
                                color: #000000;
                                font-size: .325rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }

                    }

                    .content-right {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .icon {
                            position: relative;
                            width: 2.275rem;
                            height: 2.225rem;
                            background: linear-gradient(148deg, #C2EEFB 0%, #E7F6FD 47%, #D2E3EA 100%);
                            border-radius: 30px;
                            text-align: center;
                            border: 2px solid #C2E0FF;
                        }

                        .icon::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.7rem solid transparent;
                            border-right: 0.7rem solid transparent;
                            border-bottom: 0.2rem solid #C2E0FF;
                        }

                        .icon::after {
                            content: '';
                            position: absolute;
                            bottom: -2px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.7rem solid transparent;
                            border-right: 0.7rem solid transparent;
                            border-bottom: 0.2rem solid #fff;
                        }

                        .content-text {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            text-align: center;
                            font-size: 0.4rem;
                            font-weight: 400;
                            line-height: 1.5;

                            p {
                                padding: 0 0.125rem;
                            }

                            .ranking-text {
                                background: linear-gradient(0deg, #85B7DE 0%, #5F91F5 100%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }

                            .ranking-name {
                                color: #000000;
                                font-size: 0.25rem;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }

                .award-content {
                    font-size: 0.325rem;
                }
            }
        }

        .btn-infos {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.6rem;

            .btn {
                width: 1.875rem;
                font-size: 0.325rem;
            }

            .btn+.btn {
                margin-left: 0.875rem;
            }
        }

        .btn-info {
            position: absolute;
            left: 0;
            bottom: .3rem;
            /*  display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.6rem; */

            .btn {
                width: 60%;
                font-size: 0.325rem;
            }

            .btn+.btn {
                margin-left: 0.875rem;
            }
        }
    }

    .bottom-box {
        position: relative;
        min-height: 70vh;
        padding: 0.3rem ;
        background-color: #fff;
        border-radius: .3rem;

        img {
            max-height: 1rem;
        }

        .plan-info {

            text-align: center;
        }

        .plan-infos {
            background: url('@/assets/img/bisaijieguo.png') no-repeat;
            background-size: 100% 100%;
            width: 5.375rem;
            margin: 0.13rem auto;
            height: 1.2rem;
            line-height: 1.4rem;
            text-align: center;
        }

        .plan-text-info {
            margin: 0.25rem 0;
            display: flex;
            justify-content: start;
            align-items: center;

            img {
                width: 0.375rem;
                margin: 0.13rem;
            }

            .info-left {
                flex: 1;
                display: flex;
                justify-content: start;
                align-items: center;
            }

            .info-right {
                margin-left: .1rem;
                flex: 10;
                display: flex;
                justify-content: start;
                align-items: center;
            }

            .text-bg {
                padding: 0 ;
                margin-right: 0.575rem;
            }

            .text-btn {
                padding: 0 .3rem;
                background-color: #ddf0e6;
                border-radius: .25rem;
            }
        }

        .btn-info {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: .3rem;
            /*  display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0.6rem; */

            .btn {
                margin: 0 20%;
                width: 60%;
                font-size: 0.325rem;
            }

            .btn+.btn {
                margin-left: 0.875rem;
            }
        }
    }
}

.top {
    width: 100%;
    height: 3rem;
    background: linear-gradient(to bottom, #93c9af, #F4F3F8);
}

.header {
    overflow: hidden;
    box-sizing: border-box;
    padding: .2rem;
    margin: -2.5rem auto 0;
    width: 90%;
    height: 4rem;
    background-color: #fff;
    border-radius: .4rem;
}

.header-bg {
    box-sizing: border-box;
    margin: 0 auto 0;
    width: 5.4625rem;
    height: 1.1rem;
    background: url('@/assets/img/plan.png') no-repeat;
    background-size: 100% 100%;
    font-size: .35rem;
    color: #000;
    text-align: center;
    font-weight: 600;
    line-height: 1.1rem;
}

.h-title {
    margin-left: .5rem;
}

.card-top-img {
    display: inline-block;
    width: .3625rem;
    height: .3625rem;
}

.card-top {
    box-sizing: border-box;
    padding: 0 .4rem;
    margin-top: .5rem;
}

.card-top-btn {
    margin-right: .4rem;
    float: right;
    display: inline-block;
    width: 2.375rem;
    height: .675rem;
    background: #ddf0e6;
    border-radius: .225rem;
    color: #1E9858;
    text-align: center;
    line-height: .675rem;
}

.times {
    margin-left: .3rem;
    font-size: .35rem;
    font-weight: bold;
}

.card3-bg {
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: auto;
    width: 100%;
    height: 10.3875rem;
    background: url('@/assets/img/bg1.png') no-repeat;
    background-size: 100% 100%;
}

.card3-top {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 3.75rem;
}

.card3-zhuo {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 1.4875rem;
    height: 1.1875rem;
    text-align: center;
    line-height: .5625rem;
    transform: translate(-50%, -50%);
    background: url('@/assets/img/mjzhuo.png') no-repeat;
    background-size: 100% 100%;
    font-size: .25rem;
    font-weight: 600;
}

.card4-bg {
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: auto;
    width: 100%;
    height: 80vh;
    background: url('@/assets/img/bg1.png') no-repeat;
    background-size: 100% 100%;
}

.card3 {
    padding: .1rem;
    margin: .3rem auto 0;
    width: 90%;
    background-color: #fff;
}

.card4 {
    padding: .1rem;
    margin: -2.5rem auto 0;
    width: 90%;
    background-color: #fff;
}

.card3-zhuo1 {
    position: absolute;
    top: .375rem;
    left: 1.95rem;
}

.card3-zhuo2 {
    position: absolute;
    top: 1.375rem;
    left: .375rem;
}

.card3-zhuo3 {
    position: absolute;
    bottom: .375rem;
    left: 1.95rem;
}

.card3-zhuo4 {
    position: absolute;
    top: 1.375rem;
    right: .375rem;
}

.majiang-icon {
    display: block;
    width: .75rem;
    height: .75rem;
}


.card3-btn {
    margin: .3rem 3.5% 0;
    display: inline-block;
    width: 25%;
    height: .6875rem;
    background-color: #1e9858;
    text-align: center;
    line-height: .6875rem;
    color: #fff;
    font-size: .4rem;
    border-radius: .4rem;
    border: 1px solid #f98c1c;
}

.card3-btn1 {
    margin: .3rem 5% 1rem;
    display: inline-block;
    width: 40%;
    height: .875rem;
    background-color: #1e9858;
    text-align: center;
    line-height: .875rem;
    color: #fff;
    font-size: .4rem;
    border-radius: .4rem;
}

::v-deep .van-tabbar-item__icon {
    font-size: .55rem;
}

::v-deep .van-tabbar-item__text {
    font-size: .4rem;
}

.norecords {
    margin-top: 2rem;
    color: #ffbe4c;
    font-size: .5rem;
    text-align: center;
}</style>